{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote layui-text">
            费率变化说明：<span class="text-danger"></span><span class="text-danger"></span>
        </blockquote>
        <div id="container" style="width: 80%;height:600px;"></div>
    </div>
</div>
{/block}
{block name="js"}
{js href="__JS__/echarts.min.js,__JS__/wonderland.js" /}
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'), 'wonderland');
    var option;
    var datas = [
        ////////////////////////////////////////
        [
            { name: '圣彼得堡来客', value: 5.6 },
            { name: '陀思妥耶夫斯基全集', value: 1 },
            { name: '史记精注全译（全6册）', value: 0.8 },
            { name: '加德纳艺术通史', value: 0.5 },
            { name: '表象与本质', value: 0.5 },
            { name: '其它', value: 3.8 }
        ],
        // ////////////////////////////////////////
        [
            { name: '银河帝国5：迈向基地', value: 3.8 },
            { name: '俞军产品方法论', value: 2.3 },
            { name: '艺术的逃难', value: 2.2 },
            { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
            { name: 'Scrum 精髓', value: 1.2 },
            { name: '其它', value: 5.7 }
        ],

        ////////////////////////////////////////
        [
            { name: '克莱因壶', value: 3.5 },
            { name: '投资最重要的事', value: 2.8 },
            { name: '简读中国史', value: 1.7 },
            { name: '你当像鸟飞往你的山', value: 1.4 },
            { name: '表象与本质', value: 0.5 },
            { name: '其它', value: 3.8 }
        ]
    ];

    option = {
        title: {
            text: '阅读书籍分布',
            left: 'center',
            textStyle: {
                color: '#999',
                fontWeight: 'normal',
                fontSize: 14
            }
        },
        series: datas.map(function (data, idx) {
            var top = idx * 33.3;
            return {
                type: 'pie',
                radius: [20, 60],
                top: top + '%',
                height: '33.33%',
                left: 'center',
                width: 400,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n{time|{c} 小时}',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                    var points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;

                    return {
                        labelLinePoints: points
                    };
                },
                data: data
            }
        })
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    </script>
{/block}